<template>
  <van-pull-refresh v-model="refreshLoad" :disabled="!enableRefresh" @refresh="onRefresh">
    <!-- 数据显示 -->
    <van-list
      v-model:loading="listLoad"
      v-model:error="loadError"
      :finished="finished"
      :disabled="length == 0"
      :immediate-check="false"
      error-text="请求失败，点击重新加载"
      :offset="200"
      @load="onLoad"
    >
      <template #finished>
        <div v-if="length > 0 && finished && showFinished">
          {{ finishedText }}
        </div>
      </template>
      <template #loading>
        <div class="w-full h-[40px] flex justify-center items-center">
          <van-loading type="spinner" color="#000" size="26" />
        </div>
      </template>
      <!-- 列表上面的内容 -->
      <template v-if="$slots.top">
        <slot name="top"></slot>
      </template>
      <template v-if="!$slots.custom">
        <!-- 加载完成并且没有数据的情况 -->
        <template v-if="length == 0 && finished">
          <!-- 父级传过来的无数据展示 -->
          <template v-if="$slots.empty">
            <slot name="empty"></slot>
          </template>
          <!-- 默认无数据展示 -->
          <template v-else>
            <template v-if="emptyImage">
              <van-empty class="list-empty" :description="emptyText">
                <template #image>
                  <img class="w-[186px] h-[100px]" src="@/assets/images/empty-data.png" />
                </template>
              </van-empty>
            </template>
            <template v-else>
              <div class="text-[#999] text-[13px] flex justify-center items-center h-[42px]">
                {{ emptyText }}
              </div>
            </template>
          </template>
        </template>
        <template v-if="length == 0 && !finished">
          <div
            v-if="!refreshLoad"
            class="w-full h-[40px] flex justify-center items-center my-[3px]"
            :class="{
              'loading-card': loadingCard
            }"
          >
            <van-loading type="spinner" color="#666" size="26" />
            <span class="text-[14px] ml-[4px] text-[#999]">加载中...</span>
          </div>
        </template>
        <div class="van-clearfix" v-else>
          <slot></slot>
        </div>
      </template>
      <template v-else>
        <slot name="custom"></slot>
      </template>
    </van-list>
  </van-pull-refresh>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    loading?: boolean;
    refresh?: boolean;
    finished?: boolean;
    error?: boolean;
    length?: number;
    pageNum?: number;
    emptyImage?: boolean;
    emptyText?: string;
    showFinished?: boolean;
    enableRefresh?: boolean;
    finishedText?: string;
    loadingCard?: boolean;
  }>(),
  {
    loading: false,
    refresh: false,
    finished: false,
    error: false,
    length: 0,
    pageNum: 0,
    emptyImage: true,
    emptyText: "暂无数据",
    showFinished: true,
    enableRefresh: false,
    finishedText: "- - - - -  到底了哦！- - - - -",
    loadingCard: false
  }
);

const listLoad = ref(false);
const refreshLoad = ref(false);
const loadError = ref(false);
const emit = defineEmits(["update:loading", "update:refresh", "update:error", "load", "refresh"]);

watch(
  () => props.loading,
  val => {
    listLoad.value = val;
  }
);
watch(
  () => props.refresh,
  val => {
    refreshLoad.value = val;
  }
);
watch(
  () => props.error,
  val => {
    loadError.value = val;
  }
);

watch(listLoad, () => {
  emit("update:loading", listLoad.value);
});
watch(refreshLoad, () => {
  emit("update:refresh", refreshLoad.value);
});
watch(loadError, () => {
  emit("update:error", loadError.value);
});

const onLoad = () => {
  emit("load");
};

const onRefresh = () => {
  emit("refresh");
};
</script>
<style lang="scss" scoped>
:deep(.van-list__finished-text) {
  line-height: 50px;
}
.loading-card {
  height: 150px;
}
:deep() {
  .list-empty {
    .van-empty__image {
      width: 186px;
      height: 100px;
    }
    .van-empty__description {
      margin-top: 5px;
    }
  }
}
</style>
